<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-21 22:25:37
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="annual animated bounceInRight">
    <div class="header" v-show="canver_a">
      <p style="font-size:0.14rem;color:#979797;display:flex;align-items: center;" @click="hist">
        <img src="../../assets/histry.png" alt>返回
      </p>
      <p class="text1">{{p}}年报</p>
      <p class="text2" @click="category">
        {{text_title_right}}
        <img src="../../assets/more.png">
      </p>
    </div>
    <mt-popup v-model="popupVisible" position="top" class="category_box">
      <div class="category">
        <ul>
          <li v-for="(i,index) in text" :key="index" @click="text_title(index)">{{i}}</li>
        </ul>
      </div>
    </mt-popup>
    <mt-popup v-model="popupVisibl" position="top" :class="xian?'category_box2':'category_box3'">
      <div class="category">
        <ul>
          <li v-for="(i,index) in cainian_list" :key="index" @click="cai_title(index)">{{i}}</li>
        </ul>
      </div>
    </mt-popup>
    <mt-popup v-model="popupVisib" position="top" class="category_box3">
      <div class="category">
        <ul>
          <li v-for="(i,index) in yuce_fangfa_list" :key="index" @click="yuce_fangfas(index)">{{i}}</li>
        </ul>
      </div>
    </mt-popup>
    <div class="content" v-show="canver_a">
      <div class="zifu">
        <dl>
            <dd>
              <div class="box_1"></div>
              {{shuzi_1}}
            </dd>
            <dd v-if='xianshi_1'>
              <div class="box_2"></div>
              {{shuzi_2}}
            </dd>
            <dd v-if="xianshi_2">
              <div class="box_3"></div>
              {{shuzi_3}}
            </dd>
            <dd v-if="xianshi_4">
              <div style="background:#6ABFA7"></div>
              {{shuzi_8}}
            </dd>
            <dd v-if="xianshi_5">
              <div style="background:#FFDE67"></div>
              {{shuzi_9}}
            </dd>
        </dl>
        <dl style="padding-bottom:0.12rem;">
            <dd>
              <div class="box_1"></div>
              {{shuzi_4}}
            </dd>
            <dd v-if="kanxianzai">
              <div class="box_4"></div>
              {{shuzi_5}}
            </dd>
            <dd v-if="xianshi_3">
              <div class="box_2"></div>
              {{shuzi_6}}
            </dd>
        </dl>
      </div>
      <div class="danwei_text">
        <p v-if="!yuce" style="margin-left:0.18rem;font-size:0.1rem;color:#525252;margin-top:0.03rem;">单位:{{yuan}}</p>
        <p style="color:#A9A9A9;font-family: DIN-Regular !important;">{{shang_nian}}-{{jin_nian}}</p>
        <p @click="cai_nian">财年:<span style="color:#A5C6FD">{{cainian}}</span></p>
        <p v-if="yuce" @click="yuce_fang">预测方法:<span style="color:#A5C6FD">{{yuce_fangfa}}</span></p>
      </div>
      <p v-if="yuce" style="margin-left:0.18rem;font-size:0.1rem;color:#525252;margin-top:0.03rem;">单位:{{yuan}}</p>
      <div id="myCharts_d" :style="{width: '100%', height: '40%'}"></div>
      <div class="yisi">
        <dl>
          <dd>
            <div class="box_1"></div>剩余目标
          </dd>
          <dd>
            <div class="box_2"></div>已完成
          </dd>
          <dd>
            <div class="box_5"></div>预测
          </dd>
          <dd>
            <div class="box_4"></div>达标
          </dd>
        </dl>
        <dl style="margin-top:0.08rem;">
          <dd>
            <div class="box_3"></div>未达标
          </dd>
          <dd>
            <div class="box_6"></div>超额目标
          </dd>
          <dd></dd>
          <dd></dd>
        </dl>
      </div>
      <div class="zhuanhuan">
        <img id='hun' :src="hunhe?require('../../assets/hun_no.png'):require('../../assets/hun_ok.png')" alt="">
        <img id="zhu" :src="zhuzhuang?require('../../assets/zhu_no.png'):require('../../assets/zhu_ok.png')" alt="">
        <img id="zhe" :src="zhexian?require('../../assets/zhe_no.png'):require('../../assets/zhe_ok.png')" alt="">
      </div>
      <div id="myCharts" :style="{width: '100%', height: '40%'}"></div>
      <div class="zifu">
        <dl style="padding-bottom:0.1rem;">
          <p>已完成平均值</p>
          <dd>
            <div class="box_1"></div>
            {{shuzi_7}}
          </dd>
        </dl>
      </div>
      <div class="yisi">
        <dl>
          <dd>
            <div class="box_1"></div>目标
          </dd>
          <dd>
            <div class="box_2"></div>已完成
          </dd>
          <dd>
            <div class="box_5"></div>预测
          </dd>
          <dd>
            <div class="box_4"></div>达标
          </dd>
        </dl>
        <dl style="margin-top:0.08rem;margin-bottom:0.08rem;">
          <dd>
            <div class="box_3"></div>未达标
          </dd>
          <dd>
            <div class="box_6"></div>超额目标
          </dd>
          <dd></dd>
          <dd></dd>
        </dl>
      </div>
    </div>
    <div class="content_heng" v-show="!canver_a">
      <div class="zifu">
        <dl>
            <dd>
              <div class="box_1"></div>
              {{shuzi_1}}
            </dd>
            <dd v-if='xianshi_1'>
              <div class="box_2"></div>
              {{shuzi_2}}
            </dd>
            <dd v-if="xianshi_2">
              <div class="box_3"></div>
              {{shuzi_3}}
            </dd>
            <dd v-if="xianshi_4">
              <div style="background:#6ABFA7"></div>
              {{shuzi_8}}
            </dd>
            <dd v-if="xianshi_5">
              <div style="background:#FFDE67"></div>
              {{shuzi_9}}
            </dd>
        </dl>
        <dl style="padding-bottom:0.08rem;">
            <dd>
              <div class="box_1"></div>
              {{shuzi_4}}
            </dd>
            <dd v-if="kanxianzai">
              <div class="box_4"></div>
              {{shuzi_5}}
            </dd>
            <dd v-if="xianshi_3">
              <div class="box_2"></div>
              {{shuzi_6}}
            </dd>
        </dl>
      </div>
      <div class="danwei_text">
        <p v-if="!yuce" style="margin-left:0.18rem;font-size:0.1rem;color:#525252;margin-top:0.03rem;">单位:{{yuan}}</p>
        <p style="color:#A9A9A9;font-family: DIN-Regular !important;">{{shang_nian}}-{{jin_nian}}</p>
        <p @click="cai_nian_heng">财年:<span style="color:#A5C6FD">{{cainian}}</span></p>
        <p v-if="yuce" @click="yuce_fang_heng">预测方法:<span style="color:#A5C6FD">{{yuce_fangfa}}</span></p>
      </div>
      <p v-if="yuce" style="margin-left:0.18rem;font-size:0.1rem;color:#525252;margin-top:0.03rem;">单位:{{yuan}}</p>
      <div id="myCharts_d_h" :style="{width: '667px', height: '280px'}"></div>
      <div class="yisi">
        <dl>
          <dd>
            <div class="box_1"></div>剩余目标
          </dd>
          <dd>
            <div class="box_2"></div>已完成
          </dd>
          <dd>
            <div class="box_5"></div>预测
          </dd>
          <dd>
            <div class="box_4"></div>达标
          </dd>
        </dl>
        <dl>
          <dd>
            <div class="box_3"></div>未达标
          </dd>
          <dd>
            <div class="box_6"></div>超额目标
          </dd>
          <dd></dd>
          <dd></dd>
        </dl>
      </div>
      <div class="zhuanhuan">
        <img id='hun_h' :src="hunhe?require('../../assets/hun_no.png'):require('../../assets/hun_ok.png')" alt="">
        <img id="zhu_h" :src="zhuzhuang?require('../../assets/zhu_no.png'):require('../../assets/zhu_ok.png')" alt="">
        <img id="zhe_h" :src="zhexian?require('../../assets/zhe_no.png'):require('../../assets/zhe_ok.png')" alt="">
      </div>
      <div id="myCharts_h" :style="{width: '667px', height: '280px'}"></div>
      <div class="zifu">
        <dl style="padding-bottom:0.1rem;">
          <p>已完成平均值</p>
          <dd>
            <div class="box_1"></div>
            {{shuzi_7}}
          </dd>
        </dl>
      </div>
      <div class="yisi">
        <dl>
          <dd>
            <div class="box_1"></div>目标
          </dd>
          <dd>
            <div class="box_2"></div>已完成
          </dd>
          <dd>
            <div class="box_5"></div>预测
          </dd>
          <dd>
            <div class="box_4"></div>达标
          </dd>
        </dl>
        <dl style="margin-bottom:0.08rem;">
          <dd>
            <div class="box_3"></div>未达标
          </dd>
          <dd>
            <div class="box_6"></div>超额目标
          </dd>
          <dd></dd>
          <dd></dd>
        </dl>
      </div>
    </div>
    <div class="footer_box" v-show="canver_a">
      <div class="footer">
        <p
          :class="xian?'p_text':'p_text_w'"
          @click="ing"
          style="border-right:0.01rem solid #eee;"
        >看现在</p>
        <p :class="wei?'p_text':'p_text_x'" @click="ed">望未来</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  check_login,
  query_ent_dept_list,
  query_category_info_list,
  get_inv_year
} from "../../api/api.js";
import { Toast } from "mint-ui";
export default {
  name: "annual",
  inject: ["reload"],
  data() {
    return {
      canver_a:true,
      xian:true,
      wei:false,
      mobile: "",
      p: "",
      text_title_right: "筛选",
      text: ["部门", "产品"],
      cainian_list:['公历','自定义'],
      popupVisible: false,
      popupVisibl:false,
      yuan: "元",
      shuzhi:1,
      ent_id: null,
      dept_id: null,
      staff_id: null,
      prod_id: null,
      cat_id: null,
      li_list_1: [],
      li_list_2: [],
      li_list_3: [],
      li_list_4: [],
      nian_xian:'',
      month_list:'',
      blue:[],
      green:[],
      orange:[],
      red:[],
      violet:[],
      yellow:[],
      aim:[],
      lanxian:[],
      zhi:0,//当月值
      zixian:[],
      huangdian:[],
      xian_shijian:[],
      shuzi_1:'',
      shuzi_2:'',
      shuzi_3:'',
      shuzi_4:'',
      shuzi_5:'',
      shuzi_6:'',
      shang_nian:'',
      jin_nian:'',
      cainian:'未设定',
      shuzi_7:'',
      kanxianzai:true,
      nian2_xian:'',
      xianshi_1:true,
      xianshi_2:true,
      xianshi_3:true,
      shuzi_8:'',
      xianshi_4:true,
      xianshi_5:true,
      shuzi_9:'',
      hunhe:false,
      zhuzhuang:true,
      zhexian:true,
      yuce:true,
      yuce_fangfa:'预测法',
      popupVisib:false,
      yuce_fangfa_list:['预测法','定义法']
    }
  },
  mounted() {
    // 判断是否登录
    if (sessionStorage.getItem("mobile") != null) {
      this.mobile = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.mobile
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    });
    if (sessionStorage.getItem("mlbb_xinxi") != null) {
      this.dept_id = JSON.parse(sessionStorage.getItem("mlbb_xinxi")).ent_id;
    }
    if (sessionStorage.getItem("xuan") != null) {
      this.li_list_1 = JSON.parse(sessionStorage.getItem("xuan"));
    }
    if (sessionStorage.getItem("xuan_two") != null) {
      this.li_list_2 = JSON.parse(sessionStorage.getItem("xuan_two"));
    }
    if (sessionStorage.getItem("xuan_three") != null) {
      this.li_list_3 = JSON.parse(sessionStorage.getItem("xuan_three"));
    }
    if (sessionStorage.getItem("xuan_four") != null) {
      this.li_list_4 = JSON.parse(sessionStorage.getItem("xuan_four"));
    }
    if (sessionStorage.getItem("text_title") != null) {
      this.p = JSON.parse(sessionStorage.getItem("text_title"));
    }
    if (sessionStorage.getItem("nian_xian") != null) {
      this.nian_xian = JSON.parse(
        JSON.parse(sessionStorage.getItem("nian_xian"))
      );
      this.month_list=this.nian_xian.inv_year_list
    }
    if (sessionStorage.getItem("nian2_xian") != null) {
      this.nian2_xian = JSON.parse(
        JSON.parse(sessionStorage.getItem("nian2_xian"))
      );
    }
    
    this.danwei()
    this.canver()
    this.canver_two()
    if(this.nian2_xian==1){
      this.ing()
    }
    this.heng()
    console.log(this.nian_xian)
  },
  created() {},
  watch: {
  },
  methods: {
    // 算单位  =====  数值添加====各种算都在这里面
    danwei(){
      let zongmubiao=this.nian_xian.amt_aim_avg.toFixed(0)+''
      if(zongmubiao.length<=4){
        this.yuan='元'
        this.shuzhi=1
      }else if(zongmubiao.length<=8&&zongmubiao.length>4){
        this.yuan='万元'
        this.shuzhi=10000
      }else if(zongmubiao.length>8){
        this.yuan="亿"
        this.shuzhi=100000000
      }
      // 数据转换
      this.nian_xian.amt_aim=Number((this.nian_xian.amt_aim/this.shuzhi).toFixed(2));
      this.nian_xian.amt_aim_avg=Number((this.nian_xian.amt_aim_avg/this.shuzhi).toFixed(2));
      this.nian_xian.amt_avg_have=Number((this.nian_xian.amt_avg_have/this.shuzhi).toFixed(2));
      this.nian_xian.amt_inv_sum=Number((this.nian_xian.amt_inv_sum/this.shuzhi).toFixed(2));
      this.nian_xian.amt_inv_sum_est=Number((this.nian_xian.amt_inv_sum_est/this.shuzhi).toFixed(2));
      this.nian_xian.amt_inv_sum_should=Number((this.nian_xian.amt_inv_sum_should/this.shuzhi).toFixed(2));
      this.nian_xian.amt_gap_avg=Number((this.nian_xian.amt_gap_avg/this.shuzhi).toFixed(2));
      this.nian_xian.in_blue=Number((this.nian_xian.in_blue/this.shuzhi).toFixed(2));
      this.nian_xian.in_red=Number((this.nian_xian.in_red/this.shuzhi).toFixed(2));
      this.nian_xian.in_violet=Number((this.nian_xian.in_violet/this.shuzhi).toFixed(2));
      this.nian_xian.out_blue=Number((this.nian_xian.out_blue/this.shuzhi).toFixed(2));
      this.nian_xian.out_green=Number((this.nian_xian.out_green/this.shuzhi).toFixed(2));
      this.nian_xian.out_orange=Number((this.nian_xian.out_orange/this.shuzhi).toFixed(2));
      this.nian_xian.out_red=Number((this.nian_xian.out_red/this.shuzhi).toFixed(2));
      this.nian_xian.out_yellow=Number((this.nian_xian.out_yellow/this.shuzhi).toFixed(2));
      for(let i=0;i<this.month_list.length;i++){
        this.month_list[i].amt_aim=Number((this.month_list[i].amt_aim/this.shuzhi).toFixed(2));
        this.month_list[i].out_blue=Number((this.month_list[i].out_blue/this.shuzhi).toFixed(2));
        this.month_list[i].out_green=Number((this.month_list[i].out_green/this.shuzhi).toFixed(2));
        this.month_list[i].out_orange=Number((this.month_list[i].out_orange/this.shuzhi).toFixed(2));
        this.month_list[i].out_red=Number((this.month_list[i].out_red/this.shuzhi).toFixed(2));
        this.month_list[i].out_violet=Number((this.month_list[i].out_violet/this.shuzhi).toFixed(2));
        this.month_list[i].out_yellow=Number((this.month_list[i].out_yellow/this.shuzhi).toFixed(2));
        if(this.month_list[i].amt_inv_sum!=undefined){
          this.month_list[i].amt_inv_sum=Number((this.month_list[i].amt_inv_sum/this.shuzhi).toFixed(2));
        }
        if(this.month_list[i].amt_inv_sum_est!=undefined){
          this.month_list[i].amt_inv_sum_est=Number((this.month_list[i].amt_inv_sum_est/this.shuzhi).toFixed(2));
        }
        if(this.month_list[i].amt_aim_tow!=undefined){
          this.month_list[i].amt_aim_tow=Number((this.month_list[i].amt_aim_tow/this.shuzhi).toFixed(2));
        }
        if(this.month_list[i].amt_inv_sum_est!=undefined){
          this.month_list[i].amt_inv_sum_est=Number((this.month_list[i].amt_inv_sum_est/this.shuzhi).toFixed(2));
        }
        this.blue.push(this.month_list[i].out_blue)
        this.green.push(this.month_list[i].out_green)
        this.orange.push(this.month_list[i].out_orange)
        this.red.push(this.month_list[i].out_red)
        this.yellow.push(this.month_list[i].out_yellow)
        this.violet.push(this.month_list[i].out_violet)
        this.aim.push(this.month_list[i].amt_aim)
        this.xian_shijian.push(this.month_list[i].the_month)
        if(this.month_list[i].amt_inv_sum!=undefined&&this.month_list[i].amt_inv_est_sum!=undefined){
          if(this.wei){
            this.zhi=((this.month_list[i].out_blue+this.month_list[i].out_green)/this.shuzhi).toFixed(2)
          }else{
           this.zhi=((this.month_list[i].amt_inv_sum+this.month_list[i].amt_inv_est_sum)/this.shuzhi).toFixed(2)
          }
        }
        if(this.month_list[i].amt_aim_tow<0){
          this.month_list[i].amt_aim_tow=0
        }
      }
      // 上一年&&&&&&&今年
      this.shang_nian=this.nian_xian.year_first_date.slice(0,4)+'/'+this.nian_xian.year_first_date.slice(4,6)+'/'+this.nian_xian.year_first_date.slice(6)
      this.jin_nian=this.nian_xian.year_last_date.slice(0,4)+'/'+this.nian_xian.year_last_date.slice(4,6)+'/'+this.nian_xian.year_last_date.slice(6)
      // 那些折现
      for(let i=0;i<this.nian_xian.current_month_num-1;i++){
        this.lanxian.push(this.month_list[i].amt_inv_sum)
        this.zixian.push('')
        this.huangdian.push('')
      }
      this.lanxian.push(this.zhi)
      this.zixian.push(this.zhi)
      for(let i=this.nian_xian.current_month_num;i<this.month_list.length;i++){
        this.zixian.push(this.month_list[i].amt_inv_est_sum)
      }
      for(let i=this.nian_xian.current_month_num-1;i<this.month_list.length;i++){
        this.huangdian.push(this.month_list[i].amt_aim_tow)
      }
      this.shuzi_1=this.nian_xian.out_blue.toFixed(2)+'('+((this.nian_xian.out_blue/this.nian_xian.amt_aim)*100).toFixed(2)+'%'+')'
      this.shuzi_2=this.nian_xian.out_red.toFixed(2)+'('+((this.nian_xian.out_red/this.nian_xian.amt_aim)*100).toFixed(2)+'%'+')'
      this.shuzi_3=this.nian_xian.out_orange.toFixed(2)+'('+((this.nian_xian.out_orange/this.nian_xian.amt_aim)*100).toFixed(2)+'%'+')'
      this.shuzi_4=this.nian_xian.in_blue.toFixed(2)+'('+((this.nian_xian.in_blue/this.nian_xian.amt_aim)*100).toFixed(2)+'%'+')'
      this.shuzi_5=this.nian_xian.in_violet.toFixed(2)+'('+((this.nian_xian.in_violet/this.nian_xian.amt_aim)*100).toFixed(2)+'%'+')'
      this.shuzi_6=this.nian_xian.in_red.toFixed(2)+'('+((this.nian_xian.in_red/this.nian_xian.amt_aim)*100).toFixed(2)+'%'+')'
      this.shuzi_7=this.nian_xian.amt_avg_have.toFixed(2)
      this.shuzi_8=this.nian_xian.out_green.toFixed(2)+"("+((this.nian_xian.out_green/this.nian_xian.amt_aim)*100).toFixed(2)+"%)"
      this.shuzi_9=this.nian_xian.out_yellow.toFixed(2)+"("+((this.nian_xian.out_yellow/this.nian_xian.amt_aim)*100).toFixed(2)+"%)"
      // 千位符
      var reg = /(-?\d+)(\d{3})/;
      this.shuzi_1=this.shuzi_1.replace(reg, "$1,$2");
      this.shuzi_2=this.shuzi_2.replace(reg, "$1,$2");
      this.shuzi_3=this.shuzi_3.replace(reg, "$1,$2");
      this.shuzi_4=this.shuzi_4.replace(reg, "$1,$2");
      this.shuzi_5=this.shuzi_5.replace(reg, "$1,$2");
      this.shuzi_6=this.shuzi_6.replace(reg, "$1,$2");
      this.shuzi_7=this.shuzi_7.replace(reg, "$1,$2");
      // 判断显示与否
      if(this.nian_xian.out_red==0){
        this.xianshi_1=false
      }
      if(this.nian_xian.out_orange==0){
        this.xianshi_2=false
      }
      if(this.nian_xian.in_red==0){
        this.xianshi_3=false
      }
      if(this.nian_xian.in_violet==0){
        this.kanxianzai=false
      }
      if(this.nian_xian.out_green==0){
        this.xianshi_4=false
      }
      if(this.nian_xian.out_yellow==0){
        this.xianshi_5=false
      }
      // 显示财年还是自定义
      if(this.nian_xian.fiscal_year_type==undefined){
        this.cainian='公历'
      }else{
        if(this.nian_xian.fiscal_year_type==0){
          this.cainian='公历'
        }else if(this.nian_xian.fiscal_year_type==1){
          this.cainian='自定义'
        }
      }
      if (sessionStorage.getItem("fang_r_xian") != null) {
        let ming =JSON.parse(sessionStorage.getItem("fang_r_xian"));
        if(ming==1){
          this.yuce_fangfa='预测法'
        }else if(ming==2){
          this.yuce_fangfa='定义法'
        }
      }
    },
    // 时间小于10前面加0
    pa(s) {
      return s < 10 ? "0" + s : s;
    },
    // id
    idd(){
      //部门id
      if (this.li_list_1.length == 0) {
        this.ent_id = null;
      } else if (this.ent_id == "") {
        for (var i = 0; i < this.li_list_1.length; i++) {
          this.ent_id.push(this.li_list_1[i].id);
        }
        if (this.li_list_1.constructor === Array) {
          this.ent_id = this.ent_id.join(",");
        }
      }
      // 人员id
      if (this.li_list_3.length == 0) {
        this.staff_id = null;
      } else if (this.staff_id == "") {
        for (var i = 0; i < this.li_list_3.length; i++) {
          this.staff_id.push(this.li_list_3[i].id);
        }
        if (this.li_list_3.constructor === Array) {
          this.staff_id = this.staff_id.join(",");
        }
      }
      // 产品id
      if (this.li_list_2.length == 0) {
        this.prod_id = null;
      } else if (this.prod_id == "") {
        for (var i = 0; i < this.li_list_2.length; i++) {
          this.prod_id.push(this.li_list_2[i].id);
        }
        if (this.li_list_2.constructor === Array) {
          this.prod_id = this.prod_id.join(",");
        }
      }
      // 产品类型id
      if (this.li_list_4.length == 0) {
        this.cat_id = null;
      } else if (this.cat_id == "") {
        for (var i = 0; i < this.li_list_4.length; i++) {
          this.cat_id.push(this.li_list_4[i].id);
        }
        if (this.li_list_4.constructor === Array) {
          this.cat_id = this.cat_id.join(",");
        }
      }
    },
    // 看现在
    ing() {
      if(this.xian){
        this.xian=false
        this.wei=true
        this.yuce=false
        this.kanxianzai=false
        this.xianshi_5=false
        // this.red.splice(zong_zhi)
        this.shuzi_6=(this.nian_xian.in_red+this.nian_xian.in_violet).toFixed(2)+'('+(((this.nian_xian.in_red+this.nian_xian.in_violet)/this.nian_xian.amt_aim)*100).toFixed(2)+"%)"
        if(this.nian_xian.in_blue<this.nian_xian.amt_aim){
          this.nian_xian.in_red=(this.nian_xian.in_red+this.nian_xian.in_violet).toFixed(2)
          this.xianshi_3=true
          let reda=Number(this.nian_xian.inv_year_list[this.nian_xian.current_month_num-1].out_red+this.nian_xian.inv_year_list[this.nian_xian.current_month_num-1].out_violet)
          let zong_zhi=this.nian_xian.current_month_num
          this.red.splice(zong_zhi)
          this.red[zong_zhi-1]=reda
          this.lanxian[zong_zhi-1]=this.nian_xian.inv_year_list[this.nian_xian.current_month_num-1].out_blue
        }else{
          this.nian_xian.in_red=0
          this.nian_xian.out_yellow=0
          this.nian_xian.rubbish_value=0
          this.lanxian[zong_zhi-1]=this.nian_xian.inv_year_list[this.nian_xian.current_month_num-1].out_blue+this.nian_xian.inv_year_list[this.nian_xian.current_month_num-1].out_green
          if(this.nian_xian.out_green!=0){
            this.nian_xian.x2_axis.splice(12+Number((this.nian_xian.out_green/this.nian_xian.amt_aim_avg).toFixed(0)))
          }else{
            this.nian_xian.x2_axis.splice(12)
          }
        }
        this.yellow=[]
        this.nian_xian.in_violet=0
        let zong_zhi=this.nian_xian.current_month_num
        this.nian_xian.x_axis.splice(zong_zhi)
        this.blue.splice(zong_zhi)
        this.red.splice(zong_zhi)
        
        this.orange=[]
        this.green.splice(zong_zhi)
        this.yellow.splice(zong_zhi)
        this.zixian=[]
        this.huangdian.splice(zong_zhi)
        this.violet=[]
        // 千位符
        var reg = /(-?\d+)(\d{3})/;
        this.shuzi_6=this.shuzi_6.replace(reg, "$1,$2");
        this.lanxian[this.lanxian.length-1]=((this.month_list[this.lanxian.length-1].out_blue+this.month_list[this.lanxian.length-1].out_green)/this.shuzhi).toFixed(2)
        this.canver()
        this.canver_two()
      }
    },
    // 望未来
    ed() {
      if(this.wei){
        sessionStorage.setItem("nian2_xian", JSON.stringify(2));
        location.reload();
      }
    },
    // 返回销售页
    hist() {
      this.$router.push("/sale");
    },
    // 选择图表类型
    category() {
      this.popupVisible = true;
    },
    // 点击切换图表类型
    text_title(i) {
      if (this.text[i] == "部门") {
        this.$loading.open();
        query_ent_dept_list({
          data: {
            parent_id: "0",
            ent_id: this.dept_id,
            active:'1'
          }
        }).then(res => {
          this.$loading.close();
          console.log(res);
          if (res.data.code == 10168) {
            this.$router.push("/depalist");
          } else if (res.data.code == 10169) {
            this.$toast("获取列表失败");
          }
        });
      } else if (this.text[i] == "产品") {
        this.$loading.open();
        query_category_info_list({
          data: {
            ent_id:this.$ent_id(),
            parent_id:'0',
            active:'1'
          }
        }).then(res => {
          this.$loading.close();
          if (res.data.code == 10193) {
            this.$router.push("/prodlist");
          } else if (res.data.code == 10194) {
            this.$toast("获取列表失败");
          }
        });
      }
    },
    // 第一幅图
    canver() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts_d"));
      myChart.setOption({
        angleAxis: {
          data: this.nian_xian.x2_axis,
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#A9A8A8"
            }
          },
          z: 20,
          axisTick: {
            interval: 0,
            inside: true,
            length: 40,
            lineStyle: {
              type: "dotted",
              color: "#A9A8A8"
            }
            // alignWithLabel:true
          },
          axisLabel: {
            interval: 0,
            margin: 2,
            color: "#4B4B4B",
            fontSize:10
          }
        },
        radiusAxis: {
          axisLine: {
            show: false
          }
        },
        polar: {},
        tooltip: {
          trigger: "item",
          formatter: params=>{
              if(params.data.name=='asd'){
              }else{
                params.percent=((params.data.value/this.nian_xian.amt_aim)*100).toFixed(2)
              return params.name+':'+'<br />'+params.data.value+this.yuan+'('+params.percent+'%'+')'
              }
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: [0, "50%"],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.nian_xian.in_blue,
                name: "已完成",
                itemStyle: { color: "#5596D4" }
              },
              {
                value: this.nian_xian.in_violet,
                name: "预测",
                itemStyle: { color: "#BCAEFF" }
              },
              {
                value: this.nian_xian.in_red,
                name: "未达标",
                itemStyle: { color: "#F16977" }
              },
            ]
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["60%", "78%"],
            label: {
              normal: {
                show: false,
                color: "#4B4B4B"
              }
            },
            data: [
              {
                value: this.nian_xian.out_blue,
                name: "已完成",
                itemStyle: { color: "#5596D4" },
              },
              {
                value: this.nian_xian.out_red,
                name: "未完成",
                itemStyle: { color: "#F16977" }
              },
              {
                value: this.nian_xian.out_orange,
                name: "剩余目标",
                itemStyle: { color: "#FF9C5A" }
              },
              {
                value: this.nian_xian.out_green,
                name: "溢出达标",
                itemStyle: { color: "#6ABFA7" }
              },
              {
                value: this.nian_xian.out_yellow,
                name: "超额目标",
                itemStyle: { color: "#FFDE67" }
              },
              {
                value:this.nian_xian.rubbish_value,
                name:'asd',
                itemStyle:{color:'#fff'}
              }
            ]
          }
        ]
      });
    },
    // 第二幅图
    canver_two() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts"));
      var oper=({
        tooltip : {
          trigger: 'axis',
          formatter:parmas=>{
            let lists=[]
            for(var i=0;i<parmas.length;i++){
              if(parmas[i].value!=0&&parmas[i].value!=null){
                lists.time=this.xian_shijian[parmas[i].dataIndex].slice(0,4)+'/'+this.xian_shijian[parmas[i].dataIndex].slice(4)
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='目标'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;background:#FE9D5C"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='引导目标'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;border-top:2px dotted #FF9C59;"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='当前完成'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;background:#5596D4"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='预计完成'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;background:#AB95F2"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='bar'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:parmas[i].marker,
                        time:parmas[i].time,
                      }
                    )
                  )
                }
              }
            }
            let lis=[]
            for(let i=0;i<lists.length;i++){
              if(lists[i].value!=0){
                lis.push(lists[i].color+lists[i].name+':'+lists[i].value+this.yuan+'<br />')
              }
            }
            lis=lis.join("")
            return lists.time+'<br />'+lis
          },
          axisPointer: {
            type: 'line',
          }
        },
        legend: {
            show:false,
            data:['已完成','未完成','预测','溢出达标','超额','当前完成','预计完成','目标','引导目标'],
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top:'15%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            // boundaryGap : false,
            axisTick:{
              alignWithLabel:true
            },
            name: "(月)",
            nameGap: 6,
            nameTextStyle: {
              color: "#4B4B4B",
              fontSize: 10
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#eee",
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: "#4B4B4B"
              }
            },
            data : this.nian_xian.x_axis
          }
        ],
        yAxis : [
          {
            name:'单位:'+this.yuan,
            nameTextStyle: {
              color: "#4B4B4B",
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#eee"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#eee"
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: "#4B4B4B"
              }
            }
          }
        ],
        series : [
          // 折线
          {
            name:'目标',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              color:'#FF9C59'  
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            barCategoryGap:13,
            data:this.aim
          },
          {
            name:'引导目标',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              normal:{
                width: 1,
                color:'#FE9D5C',
                lineStyle:{
                  color:'#FE9D5C',
                  type:'dashed'  //'dashed'虚线 'solid'实线
                }
              }
            },
            barCategoryGap:13,
            data:this.huangdian,
            markLine: {
              symbol: "none",
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.nian_xian.amt_avg_have,
                  symbolSize: 1,
                  itemStyle: {
                    color: "#5596D4",
                    width: 2
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                },
              ]
            },
          },
          {
            name:'当前完成',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              color:'#5596D4'  
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            barCategoryGap:13,
            data:this.lanxian
          },
          {
            name:'预计完成',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              color:'#AB95F2'  
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            barCategoryGap:13,
            data:this.zixian
          },
          // 柱状图
          {
            name:'已完成',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#5596D4'  
            },
            barCategoryGap:13,
            data:this.blue
          },
          {
            name:'预测',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#AB95F2'  
            },
            barCategoryGap:13,
            data:this.violet
          },
          {
            name:'未完成',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#F16977'  
            },
            barCategoryGap:13,
            data:this.red
          },
          {
            name:'溢出达标',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#6ABFA7'  
            },
            barCategoryGap:13,
            data:this.green
          },
          {
            name:'超额',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#FFDE67'  
            },
            barCategoryGap:13,
            data:this.yellow
          },
          
          
        ]
      })
      myChart.setOption(oper);
      var qu = myChart.getOption().legend[0].data;
      var obj = {};
      let that=this
      $('#zhu').click(function(){
        that.zhuzhuang=false
        that.hunhe=true
        that.zhexian=true
        for(var i=0;i<oper.series.length;i++){
          if(oper.series[i].type=='line'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=false
              }
            }
          }
          if(oper.series[i].type=='bar'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
        }
        oper.legend.selected = obj;
        myChart.setOption(oper);
      })
      $('#zhe').click(function(){
        that.zhuzhuang=true
        that.hunhe=true
        that.zhexian=false
        for(var i=0;i<oper.series.length;i++){
          if(oper.series[i].type=='line'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
          if(oper.series[i].type=='bar'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=false
              }
            }
          }
        }
        oper.legend.selected = obj;
        myChart.setOption(oper);
      })
      $('#hun').click(function(){
        that.zhuzhuang=true
        that.hunhe=false
        that.zhexian=true
        for(var i=0;i<oper.series.length;i++){
          if(oper.series[i].type=='line'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
          if(oper.series[i].type=='bar'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
        }
        oper.legend.selected = obj;
        myChart.setOption(oper);
      })
    },
    // 第一幅图 横
    canver_heng() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts_d_h"));
      myChart.setOption({
        angleAxis: {
          data: this.nian_xian.x2_axis,
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#A9A8A8"
            }
          },
          z: 20,
          axisTick: {
            interval: 0,
            inside: true,
            length: 40,
            lineStyle: {
              type: "dotted",
              color: "#A9A8A8"
            }
            // alignWithLabel:true
          },
          axisLabel: {
            interval: 0,
            margin: 2,
            color: "#4B4B4B",
            fontSize:16
          }
        },
        radiusAxis: {
          axisLine: {
            show: false
          }
        },
        polar: {},
        tooltip: {
          trigger: "item",
          formatter: params=>{
              if(params.data.name=='asd'){
              }else{
                params.percent=((params.data.value/this.nian_xian.amt_aim)*100).toFixed(2)
              return params.name+':'+'<br />'+params.data.value+this.yuan+'('+params.percent+'%'+')'
              }
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: [0, "50%"],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.nian_xian.in_blue,
                name: "已完成",
                itemStyle: { color: "#5596D4" }
              },
              {
                value: this.nian_xian.in_violet,
                name: "预测",
                itemStyle: { color: "#BCAEFF" }
              },
              {
                value: this.nian_xian.in_red,
                name: "未达标",
                itemStyle: { color: "#F16977" }
              },
            ]
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["60%", "78%"],
            label: {
              normal: {
                show: false,
                color: "#4B4B4B"
              }
            },
            data: [
              {
                value: this.nian_xian.out_blue,
                name: "已完成",
                itemStyle: { color: "#5596D4" },
              },
              {
                value: this.nian_xian.out_red,
                name: "未完成",
                itemStyle: { color: "#F16977" }
              },
              {
                value: this.nian_xian.out_orange,
                name: "剩余目标",
                itemStyle: { color: "#FF9C5A" }
              },
              {
                value: this.nian_xian.out_green,
                name: "溢出达标",
                itemStyle: { color: "#6ABFA7" }
              },
              {
                value: this.nian_xian.out_yellow,
                name: "超额目标",
                itemStyle: { color: "#FFDE67" }
              },
              {
                value:this.nian_xian.rubbish_value,
                name:'asd',
                itemStyle:{color:'#fff'}
              }
            ]
          }
        ]
      });
    },
    // 第二幅图 横
    canver_two_heng() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts_h"));
      var oper=({
        tooltip : {
          trigger: 'axis',
          formatter:parmas=>{
            let lists=[]
            for(var i=0;i<parmas.length;i++){
              if(parmas[i].value!=0&&parmas[i].value!=null){
                lists.time=this.xian_shijian[parmas[i].dataIndex].slice(0,4)+'/'+this.xian_shijian[parmas[i].dataIndex].slice(4)
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='目标'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;background:#FE9D5C"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='引导目标'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;border-top:2px dotted #FF9C59;"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='当前完成'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;background:#5596D4"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='line'&&parmas[i].seriesName=='预计完成'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:'<span style="display:inline-block;margin-right:5px;width:10px;height:2px;background:#AB95F2"></span>',
                        time:parmas[i].time,
                      }
                    )
                  )
                }
                if(parmas[i].seriesType=='bar'){
                  lists.push(
                    Object.assign(
                      {},
                      {
                        value: parmas[i].value,
                        name: parmas[i].seriesName,
                        color:parmas[i].marker,
                        time:parmas[i].time,
                      }
                    )
                  )
                }
              }
            }
            let lis=[]
            for(let i=0;i<lists.length;i++){
            if(lists[i].value!=0){
              lis.push(lists[i].color+lists[i].name+':'+lists[i].value+this.yuan+'<br />')
              }
            }
            lis=lis.join("")
            return lists.time+'<br />'+lis
          },
          axisPointer: {
            type: 'line',
          }
        },
        legend: {
            show:false,
            data:['已完成','未完成','预测','溢出达标','超额','当前完成','预计完成','目标','引导目标'],
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top:'15%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            // boundaryGap : false,
            axisTick:{
              alignWithLabel:true
            },
            name: "(月)",
            nameGap: 6,
            nameTextStyle: {
              color: "#4B4B4B",
              fontSize: 16
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#eee",
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 16,
                color: "#4B4B4B"
              }
            },
            data : this.nian_xian.x_axis
          }
        ],
        yAxis : [
          {
            name:'单位:'+this.yuan,
            nameTextStyle: {
              color: "#4B4B4B",
              fontSize: 16
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#eee"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#eee"
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 16,
                color: "#4B4B4B"
              }
            }
          }
        ],
        series : [
          // 折线
          {
            name:'目标',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              color:'#FF9C59'  
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            barCategoryGap:13,
            data:this.aim
          },
          {
            name:'引导目标',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              normal:{
                width: 1,
                color:'#FE9D5C',
                lineStyle:{
                  color:'#FE9D5C',
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            },
            barCategoryGap:13,
            data:this.huangdian,
            markLine: {
              symbol: "none",
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.nian_xian.amt_avg_have,
                  symbolSize: 1,
                  itemStyle: {
                    color: "#5596D4",
                    width: 2
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                },
              ]
            },
          },
          {
            name:'当前完成',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              color:'#5596D4'  
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            barCategoryGap:13,
            data:this.lanxian
          },
          {
            name:'预计完成',
            type:'line',
            symbolSize: 3,
            itemStyle:{
              color:'#AB95F2'  
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            barCategoryGap:13,
            data:this.zixian
          },
          // 柱状图
          {
            name:'已完成',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#5596D4'  
            },
            barCategoryGap:13,
            data:this.blue
          },
          {
            name:'预测',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#AB95F2'  
            },
            barCategoryGap:13,
            data:this.violet
          },
          {
            name:'未完成',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#F16977'  
            },
            barCategoryGap:13,
            data:this.red
          },
          {
            name:'溢出达标',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#6ABFA7'  
            },
            barCategoryGap:13,
            data:this.green
          },
          {
            name:'超额',
            type:'bar',
            stack: '总量',
            itemStyle:{
              color:'#FFDE67'  
            },
            barCategoryGap:13,
            data:this.yellow
          },
          
          
        ]
      })
      myChart.setOption(oper);
      var qu = myChart.getOption().legend[0].data;
      var obj = {};
      let that=this
      $('#zhu_h').click(function(){
        that.zhuzhuang=false
        that.hunhe=true
        that.zhexian=true
        for(var i=0;i<oper.series.length;i++){
          if(oper.series[i].type=='line'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=false
              }
            }
          }
          if(oper.series[i].type=='bar'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
        }
        oper.legend.selected = obj;
        myChart.setOption(oper);
      })
      $('#zhe_h').click(function(){
        that.zhuzhuang=true
        that.hunhe=true
        that.zhexian=false
        for(var i=0;i<oper.series.length;i++){
          if(oper.series[i].type=='line'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
          if(oper.series[i].type=='bar'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=false
              }
            }
          }
        }
        oper.legend.selected = obj;
        myChart.setOption(oper);
      })
      $('#hun_h').click(function(){
        that.zhuzhuang=true
        that.hunhe=false
        that.zhexian=true
        for(var i=0;i<oper.series.length;i++){
          if(oper.series[i].type=='line'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
          if(oper.series[i].type=='bar'){
            for(let x=0;x<qu.length;x++){
              if(oper.series[i].name==qu[x]){
                obj[qu[x]]=true
              }
            }
          }
        }
        oper.legend.selected = obj;
        myChart.setOption(oper);
      })
    },
    // 横屏显示
    heng() {
      let self = this; // 这里
      window.addEventListener(
        "onorientationchange" in window ? "orientationchange" : "resize",
        function() {
          if (window.orientation === 90 || window.orientation === -90) {
            self.canver_a = false;
            self.canver_heng();
            self.canver_two_heng()
          } else {
            // alert(2222)
            location.reload();
            self.canver_a = true;
          }
        },
        false
      );
    },
    // 点击财年
    cai_nian(){
      this.popupVisibl=true
    },
    // 点击财年
    cai_nian_heng(){
      Toast('请竖屏切换财年格式')
    },
    // 点击财年
    yuce_fang_heng(){
      Toast('请竖屏切换预测格式')
    },
    // 点击切换财年
    cai_title(i){
      this.$loading.open();
      let cai_shu=-1
      if(this.cainian_list[i]=='公历'){
        cai_shu='0'
      }else if(this.cainian_list[i]=='自定义'){
        cai_shu='1'
      }
      get_inv_year({data:{
        fiscal_year_type:cai_shu,
        ent_id: this.dept_id, //企业与部门id写反了
        dept_id: this.ent_id,
        staff_id: this.staff_id,
        prod_id: this.prod_id,
        cat_id:this.cat_id,
        est_type:'1'
      }}).then(res=>{
        this.$loading.close();
        if(res.data.code==10049){
          sessionStorage.setItem('nian_xian',JSON.stringify(res.data.body.data))
          if(this.xian){
            sessionStorage.setItem("nian2_xian", JSON.stringify(2));
          }else{
            sessionStorage.setItem("nian2_xian", JSON.stringify(1));
          }
          location.reload();
        }else if(res.data.code==10050){
          this.$toast("合成失败");
          this.zhuan = false;
        }else if(res.data.code==10051){
          this.$router.push("/nodata");
        }else if(res.data.code==10042){
          Toast('未设置公司财年信息')
        }
      })
    },
    yuce_fang(){
      this.popupVisib=true
      // Toast('该功能暂未开发，敬请期待。。。')
    },
    // 点击预测法
    yuce_fangfas(i){
      if(this.yuce_fangfa_list[i]=='预测法'){
        this.$loading.open();
        get_inv_year({data:{
            ent_id: this.dept_id, //企业与部门id写反了
            dept_id: this.ent_id,
            staff_id: this.staff_id,
            prod_id: this.prod_id,
            cat_id:this.cat_id,
            est_type:'1'
          }}).then(res=>{
            this.$loading.close();
            if(res.data.code==10049){
              sessionStorage.setItem('nian_xian',JSON.stringify(res.data.body.data))
              sessionStorage.setItem("nian2_xian", JSON.stringify(2));
              sessionStorage.setItem("fang_r_xian", JSON.stringify(1));
              location.reload();
            }else if(res.data.code==10050){
              this.$toast("合成失败");
              this.zhuan = false;
            }else if(res.data.code==10051){
              this.$router.push("/nodata");
            }
          })
      }else if(this.yuce_fangfa_list[i]=='定义法'){
        this.$loading.open();
        get_inv_year({data:{
            ent_id: this.dept_id, //企业与部门id写反了
            dept_id: this.ent_id,
            staff_id: this.staff_id,
            prod_id: this.prod_id,
            cat_id:this.cat_id,
            est_type:'2'
          }}).then(res=>{
            this.$loading.close();
            if(res.data.code==10049){
              sessionStorage.setItem('nian_xian',JSON.stringify(res.data.body.data))
              sessionStorage.setItem("nian2_xian", JSON.stringify(2));
              sessionStorage.setItem("fang_r_xian", JSON.stringify(2));
              location.reload();
            }else if(res.data.code==10050){
              this.$toast("合成失败");
              this.zhuan = false;
            }else if(res.data.code==10051){
              this.$router.push("/nodata");
            }
          })
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.annual {
  height: 100vh;
  background-color: #fff;
  .header {
    height: 0.44rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.15rem;
    background-color: #fff;
    border-bottom: 0.01rem solid #eee;
    img {
      height: 0.16rem;
      width: 0.08rem;
      margin-right: 0.08rem;
    }
    .text1 {
      font-size: 0.18rem;
      font-weight: 500;
      color: #000;
      font-family: PingFang-SC-Bold, PingFang-SC;
    }
    .text2 {
      font-size: 0.14rem;
      color: #a9a9a9;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.01rem solid #eee;
      height: 0.23rem;
      width: 0.63rem;
      border-radius: 0.03rem;
      img {
        margin-left: 0.06rem;
        height: 0.06rem;
        width: 0.12rem;
      }
    }
  }
  .category_box {
    .category {
      width: 1.18rem;
      background-color: #fff;
      position: absolute;
      right: -1.64rem;
      top: 0.42rem;
      border-radius: 0.06rem;
      ul {
        padding: 0 0.04rem;
        li {
          text-align: center;
          height: 0.4rem;
          line-height: 0.4rem;
          border-bottom: 0.01rem solid #eee;
          color: #1a2533;
          font-size: 0.14rem;
        }
      }
    }
  }
  .category_box2 {
    .category {
      width: 1.18rem;
      background-color: #fff;
      position: absolute;
      right: -0.5rem;
      top: 1.35rem;
      border-radius: 0.06rem;
      ul {
        padding: 0 0.04rem;
        li {
          text-align: center;
          height: 0.4rem;
          line-height: 0.4rem;
          border-bottom: 0.01rem solid #eee;
          color: #1a2533;
          font-size: 0.14rem;
        }
      }
    }
  }
  .category_box3 {
    .category {
      width: 1.18rem;
      background-color: #fff;
      position: absolute;
      right: -1.64rem;
      top: 1.35rem;
      border-radius: 0.06rem;
      ul {
        padding: 0 0.04rem;
        li {
          text-align: center;
          height: 0.4rem;
          line-height: 0.4rem;
          border-bottom: 0.01rem solid #eee;
          color: #1a2533;
          font-size: 0.14rem;
        }
      }
    }
  }
  .content {
    height: 88%;
    overflow-y: scroll;
    .zifu {
      width: 100%;
      background: #f6f6f6;
      dl {
        display: flex;
        justify-content: center;
        padding: 0 0.2rem;
        padding-top: 0.1rem;
        p{
          font-size: 0.12rem;
          color:#1A2533;
        }
        dd {
          // width:40%;
          display: flex;
          align-items: center;
          margin-left: 0.15rem;
          div {
            height: 0.06rem;
            width: 0.06rem;
            border-radius: 0.01rem;
            margin-right: 0.05rem;
          }
          .box_1 {
            background: #5596D4;
          }
          .box_2 {
            background: #f16977;
          }
          .box_3 {
            background-color: #ff9c5a;
          }
          .box_4 {
            background-color: #bcaeff;
          }
          font-family: DIN-Regular !important;
        }
      }
    }
    .danwei {
      color: #525252;
      font-size: 0.1rem;
      margin-left: 0.15rem;
    }
    .danwei_text{
      font-size: 0.1rem;
      margin-top:0.1rem;
      color:#525252;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.18rem;
      p{
        font-size: 0.1rem;
        span{
          font-size: 0.1rem;
        }
      }
    }
    .zhuanhuan{
      height:0.28rem;
      margin-top: 0.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.6rem;
      border-top:0.01rem solid #eee;
      img{
        height: 0.18rem;
      }
    }
    #myChart {
      position: absolute;
      z-index: 10;
      top: 86px;
      left: 50%;
      margin-left: -109px;
    }
    .yisi {
      padding: 0 0.1rem;
      dl {
        display: flex;
        margin: 0 auto;
        margin-top: 0.03rem;
        dd {
          width: 0.7rem;
          display: flex;
          align-items: center;
          font-size: 0.1rem;
          color: #a9a9a9;
          margin-left: 0.14rem;
          div {
            height: 0.08rem;
            width: 0.08rem;
            border-radius: 0.01rem;
            margin-right: 0.04rem;
          }
          .box_1 {
            background: #fe9d5c;
          }
          .box_2 {
            background: #5596D4;
          }
          .box_3 {
            background: #f16977;
          }
          .box_4 {
            background: #6abfa7;
          }
          .box_5 {
            background: #bcaeff;
          }
          .box_6{
            background:#FFDE67;
          }
        }
      }
    }
  }
  .content_heng {
    height: 100%;
    overflow-y: scroll;
    .zifu {
      width: 100%;
      background: #f6f6f6;
      dl {
        display: flex;
        justify-content: center;
        padding: 0 0.1rem;
        padding-top: 0.05rem;
        p{
          font-size: 0.1rem;
        }
        dd {
          // width:40%;
          display: flex;
          align-items: center;
          margin-left: 0.15rem;
          font-size: 0.09rem;
          div {
            height: 0.06rem;
            width: 0.06rem;
            border-radius: 0.01rem;
            margin-right: 0.05rem;
          }
          .box_1 {
            background: #5596D4;
          }
          .box_2 {
            background: #f16977;
          }
          .box_3 {
            background-color: #ff9c5a;
          }
          .box_4 {
            background-color: #bcaeff;
          }
          font-family: DIN-Regular !important;
        }
      }
    }
    .danwei {
      color: #525252;
      font-size: 0.08rem;
      margin-left: 0.15rem;
    }
    .danwei_text{
      font-size: 0.1rem;
      margin-top:0.01rem;
      color:#525252;
      display: flex;
      justify-content: space-between;
      padding: 0 0.18rem;
      align-items: center;
      p{
        font-size: 0.1rem;
        span{
          font-size: 0.1rem;
        }
      }
    }
    .zhuanhuan{
      height:0.28rem;
      margin-top: 0.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.6rem;
      border-top:0.01rem solid #eee;
      img{
        height: 0.18rem;
      }
    }
    .yisi {
      line-height: 0.17rem;
      padding: 0 0.18rem;
      dl {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 0.03rem;
        dd {
          width: 0.54rem;
          display: flex;
          align-items: center;
          font-size: 0.1rem;
          color: #a9a9a9;
          margin-left: 0.04rem;
          div {
            height: 0.08rem;
            width: 0.08rem;
            border-radius: 0.01rem;
            margin-right: 0.04rem;
          }
          .box_1 {
            background: #fe9d5c;
          }
          .box_2 {
            background: #5596D4;
          }
          .box_3 {
            background: #f16977;
          }
          .box_4 {
            background: #6abfa7;
          }
          .box_5 {
            background: #bcaeff;
          }
          .box_6{
            background-color: #FFDE67;
          }
        }
      }
    }
  }
  .footer_box {
    position: absolute;
    bottom: 0.01rem;
    width: 100%;
    background-color: #fff;
    .footer {
      height: 0.32rem;
      display: flex;
      align-items: center;
      border-top: 0.01rem solid #eee;
      p {
        width: 50%;
        height: 0.32rem;
        text-align: center;
        font-size: 0.14rem;
        color: #a9a9a9;
        line-height: 0.32rem;
      }
      .p_text {
        color: #a9a9a9;
        &:hover,&:active,&:focus{
          background: #ccc;
        }
      }
      .p_text_x {
        color: #ab95f2;
        border-bottom: 0.02rem solid #ab95f2;
      }
      .p_text_w {
        color: #5596D4;
        border-bottom: 0.02rem solid #5596D4;
      }
    }
  }
}
</style>
